<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画博客</title>
    <link rel="stylesheet" href="css/cartoon_blog.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.5.0.min.js"></script>


    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrap">
    <!---个人博客--->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">我的个人博客</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Blog_tech.html">博文技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="album.html">我的相册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Rest.html">休息娱乐</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="main">
        <!---学习网站--->
        <div class="study">
            <h3 class="iconfont icon-xuexi">学习网站</h3>
            <ul>
                <li><a href="https://www.runoob.com/">菜鸟教程</a></li>
                <li><a href="https://www.w3school.com.cn/">w3scholl</a></li>
                <li><a href="https://www.csdn.net/">CSDN首页</a></li>
                <li><a href="https://next.xuetangx.com/">学堂在线</a></li>
                <li><a href="https://www.w3school.com.cn/">w3scholl</a></li>
                <li><a href="https://www.csdn.net/">CSDN首页</a></li>
                <li><a href="https://www.w3cways.com/css/">CSS参考手册v4.0_web前端开发参考手册系列</a></li>
            </ul>
            <ul class="clear">
                <li>大众评分： <meter optimum="0.5" low="0.1" high="0.5" value="0.6"></meter> </li>
                <li>媒体评分： <meter optimum="0.5" low="0.1" high="1" value="0.8"></meter> </li>
                <li>网络评分： <meter optimum="0.9" low="0.4" high="0.8" value="0.3"></meter> </li>
            </ul>
        </div>
        <!--个人简介-->
        <article class="insto">
            <h3 class="iconfont icon-font22">个人简介</h3>
            <div class="min">
                <img src="images/234.jpg" class="pic" />
                <div class="ins">
                    <p>姓名：王德令</p>
                    <p>telphone:15213594878</p>
                    <p>自我介绍：我是来自重庆工程学院软件工程专业1790005班的学生.
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;我自信，我坚强，我更阳光！</p>
                </div>
            </div>
        </article>
        <article>
            <h3 class="iconfont icon-bokeblogger3">个人博客</h3>
            <div class="in">
                <p>第一篇：HTML5 结构元素</p>
                <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;H5语法,H5页面结构元素</p>
                <details>
                    <summary>显示原文</summary>
                    <time datetime="2020/3/4">2020年3月4日</time>
                    <img src="images/html.png" height="124" width="224" class="pic1"/>
                    <p>1、H5语法
                        <br>（1）标签可以不区分大小写
                        <cite>（2）允许重复属性</cite>
                        <br>（3）允许部分属性值的属性省略
                        <br>&nbsp;&nbsp;&nbsp;2、H5页面结构元素
                        <br>（1）header元素
                        （2）nav元素——导航链接 （3）article元素——文档,页面
                        <br>（4）aside元素——附属部分
                        （5）section元素——页面分块
                    </p>
                </details>
                <p>第二篇：HTML5新元素，新属性</p>
                <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新增分组元素，新增页面交互元素</p>
                <details>
                    <summary>显示原文</summary>
                    <time datetime="2020/3/4">2020年3月4日</time>
                    <img src="images/htm.jpg" height="150" width="300" class="pic1"/>
                    <p>1、新增分组元素
                        <br>&nbsp;&nbsp;(1)figure元素和figcaption元素
                        (2)hgroup元素——定义标题组的
                        <br>&nbsp;&nbsp;&nbsp;2、新增页面交互元素
                        <cite><br>（1）details和summary——可见内容</cite>
                        （2）progress元素——进度条（value,max）
                        <br>（3）meter元素——范围进度</p>
                </details>
                <p>第一篇：HTML5 结构元素</p>
                <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;H5语法,H5页面结构元素</p>
                <details>
                    <summary>显示原文</summary>
                    <time datetime="2020/3/4">2020年3月4日</time>
                    <img src="images/html.png" height="124" width="224" class="pic1"/>
                    <p>1、H5语法
                        <br>（1）标签可以不区分大小写
                        <cite>（2）允许重复属性</cite>
                        <br>（3）允许部分属性值的属性省略
                        <br>&nbsp;&nbsp;&nbsp;2、H5页面结构元素
                        <br>（1）header元素
                        （2）nav元素——导航链接 （3）article元素——文档,页面
                        <br>（4）aside元素——附属部分
                        （5）section元素——页面分块
                    </p>
                </details>
                <p>第二篇：HTML5新元素，新属性</p>
                <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新增分组元素，新增页面交互元素</p>
                <details>
                    <summary>显示原文</summary>
                    <time datetime="2020/3/4">2020年3月4日</time>
                    <img src="images/htm.jpg" height="150" width="300" class="pic1"/>
                    <p>1、新增分组元素
                        <br>&nbsp;&nbsp;(1)figure元素和figcaption元素
                        (2)hgroup元素——定义标题组的
                        <br>&nbsp;&nbsp;&nbsp;2、新增页面交互元素
                        <cite><br>（1）details和summary——可见内容</cite>
                        （2）progress元素——进度条（value,max）
                        <br>（3）meter元素——范围进度</p>
                </details>
            </div>
        </article>
    </div>

    <!---页脚--->
    <div class="foot">
        <footer>Copyright@wangdeling</footer>
    </div>
</div>
<script src="js/Color.js"></script>
</body>
</html>
<script>
    let hnav=document.querySelector(".hnav");
    let nav = document.querySelector(".nav");
    let flag = 1;
    hnav.addEventListener("click",function(){
        if (flag){
            nav.style.height = "300px";
            nav.style.display = "block";
            flag = 0;
        }else {
            nav.style.display="none";
            flag=1;
        }
    })

    let  all_li=document.querySelectorAll("#mycolor li");
    var root = document.querySelector(':root');
    for (let i=0;i<=all_li.length;i++){
        all_li[i].addEventListener("click",function(){
            if (i==0){
                root.style.setProperty("--bgwrap","linear-gradient(to top,salmon,pink 60%,aliceblue )");
                root.style.setProperty("--bgflex","#FF91B4");
                root.style.setProperty("--bgstudy","#FF719F");
            }
            if (i==1){
                root.style.setProperty("--bgwrap","linear-gradient(to top,aliceblue,#14edff 60%,aliceblue )");
                root.style.setProperty("--bgflex","#14edff");
                root.style.setProperty("--bgstudy","#09a3b6");
            }
            if (i==2){
                root.style.setProperty("--bgwrap","linear-gradient(to top,lightsteelblue,silver 60%,aliceblue )");
                root.style.setProperty("--bgflex","silver");
                root.style.setProperty("--bgstudy","silver");
            }
        })
    }
</script>